<template>
    <div>
          <el-alert
            title="添加商品信息"
            center
            type="info">
        </el-alert>
        <!-- 步骤条 -->
        <el-steps :space="200" :active=" 1" align-center="" finish-status="success">
  <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
</el-steps>
<!-- tabs导航栏 -->
<el-form>
      <el-tabs tab-position="left" >
    <el-tab-pane label="基本信息">
          <el-form-item label="商品名称">
            <el-input v-model="addGoodsData.goods_name"></el-input>
          </el-form-item>
           <el-form-item label="商品价格">
              <el-input v-model="addGoodsData.goods_price"></el-input>
            </el-form-item>

            <el-form-item label="商品重量">
              <el-input v-model="addGoodsData.goods_weight"></el-input>
            </el-form-item>

            <el-form-item label="商品数量">
              <el-input v-model="addGoodsData.goods_number"></el-input>
            </el-form-item>

            <el-form-item label="商品分类">
              <!-- 级联选择器 -->
              <!-- <p>{{ checkedArr .item}} 选中的id：{{ current_cate_id }}</p> -->
              <el-cascader
                v-model="checkedArr"
                :options="goodsCateList"
                :props="defaultProps"
          
              ></el-cascader>
            </el-form-item>
    </el-tab-pane>
      <!-- 动态参数 -->
    <el-tab-pane label="商品参数">
         <el-form-item 
             :label="item.attr_name"
              v-for="item in manyParams"
              :key="item.attr_id"
         >
           <el-checkbox-group v-model="item.attr_vals">
                <el-checkbox
                  v-for="(item2, index) in item.attr_vals"
                  :key="index"
                  border
                  :label="item2"
                ></el-checkbox>
              </el-checkbox-group>
         </el-form-item>
    </el-tab-pane>
    <!-- 静态参数 -->
    <el-tab-pane label="商品属性">
          <el-form-item
              :label="item.attr_name"
              v-for="item in onlyParams"
              :key="item.attr_id"
            >
              <el-input v-model="item.attr_vals"></el-input>
            </el-form-item>
    </el-tab-pane>
    <el-tab-pane label="">定时任务补偿</el-tab-pane>
  </el-tabs>
</el-form>

    </div>
</template>

<script>
import {getCategories} from 'api/goods'
    export default {
         data() {
            return {
                //添加商品表单对象
               addGoodsData:{
                 pics:[]
               },
               //动态参数
                  manyParams: [], 
                  //静态参数
                  onlyParams: [], 
                goodsCateList: [], //商品分类数据
                checkedArr: [], //已选择分类id组成的数组
                defaultProps:{
                      label: 'cat_name',
                        children: 'children',
                        expandTrigger: 'hover',
                        value: 'cat_id'
                }
            }
         },
         created(){
            this.getGoodsCateList()
         },
         methods:{
            async getGoodsCateList(){
                const res=await getCategories()
                 this.goodsCateList=res
            }
         }
    }
</script>

<style lang="scss" scoped>

</style>